CSS PROPERTIES AND VALUES WITH EXAMPLES

TEXT
General Comments:  These properties let you control basic text formatting. Some of these can also be applied to non-text elements.
Property	Description	Values	Example
line-height	Also known as "leading" or "line space." Specifies the distance between baselines of consecutive lines of text.	length number percentage normal XX units %	p {line-height: 12pt} Sets 12 points of space from baseline to baseline in paragraph.
letter-spacing	Lets you control the space between letters.	normal XX units	p {letter-spacing: 0} Prevents any extra space from being added between letters in a paragraph.
text-align	Aligns the element horizontally across the page or within division	left right center justify	h3 {text-align: center} Centers all level three headlines.
text-decoration	Sets underlining, overlining, strike-through, or blink attributes for the element. Vendors may be adding their own text decoration formats, as well.	underline *overline line-through *blink none	h1 {text-decoration: blink} Make all level one headlines blink. We don't recommend that you use blink at all! (and apparently, neither does Microsoft, which doesn't support it.)
text-indent	Sets the amount of indent for the first line of a text block	XX units %	p {text-indent: 2em} Indents the first line of the paragraph 2 em spaces.
text-transform	Set the case of the text.	capitalize uppercase lowercase none	p {text-transform: capitalize} Capitalizes the first character of each word in the paragraph. h2 {text-transform: uppercase} Displays all level two headlines in all uppercase characters.
vertical-align	Aligns the element vertically to the baseline. Can be very useful with images.	baseline sub super top text-top middle bottom text-bottom	img {vertical-align: middle} Places the image in the middle of the baseline.
word-spacing	Lets you control the space between words.	normal XX units	p {word-spacing:1pt} Puts an extra 1 point of space between each word in the paragraph

FONT
General Comments:  These properties let you control basic font characteristics.
Property	Description	Values	Example
font-family	Specifies the font family, or typeface, to use for the element. You can specify a series of names and the first available font is used.	font name generic name: serif sans-serif cursive fantasy monospace	p {font-family: futura, helvetica, arial, sans-serif} Display the paragraph in Futura, if available. If not, try Helvetica, Arial, and finally, any sans-serif display.
font-style	Specifies the style of type to use for the element.	normal italic oblique	h2 {font-family: futura, helvetica, arial; font-style: italic} Uses the italic variation of the typeface for all level two headlines.
font-variant	Lets you select the small caps style of the typeface.	normal small-caps	h2 {font-family: futura, helvetica, arial; font-variant: small-caps} Uses the small-caps variation of the typeface for all level two headlines.
font-weight	Lets you select the weight or boldness of the font.	lighter normal bold bolder 100 200 300 ... 900	blockquote {font-weight: bold} Makes the blockquote bold.
font-size	Let you select the size of the type in the font. Font size may be specified in absolute units or relative to the "current" size.	length percentage units % larger smaller xx-small x-small small medium large x-large xx-large	p{font-size: 12pt} displays the paragraph in 12 point type. h1 {font-size: 150%} Displays all level one headlines at 150% of their normal size.

COLOR AND BACKGROUND
General Comments:  These properties let you control the color and background of elements.
Property	Description	Values	Example
color	Sets the color of the element.	color name hex value *rgb(R%, G%, B%) *rgb(R, G, B)	p {color: red} Displays the paragraph text in red.
background-color	Sets the color for the background of the element.	color name hex value #999999 rgb(R%, G%, B%) rgb(R, G, B)	H1 {background-color: green} Displays the background area of all level one headlines in green. (The effect is like having a green bar behind the headline.)
background-image	Specifies an image to use for the background of an element.	url(URLname)	blockquote {background-image: url(..images/sand.gif)} Displays the image "sand.gif" in the background area of the blockquote.
background-repeat	Specifies how and if a background image is repeated.	repeat repeat-x repeat-y no-repeat	blockquote {background-image: url(..images/sand.gif); background-repeat: repeat} Displays the image "sand.gif" in the background area of the blockquote and repeats the image vertically and horizontally to fill the entire background area.
background-attachment	Lets you attach the background image so that it doesn't scroll.	scroll fixed	blockquote {background-image: url(../images/sand.gif); background-attachment: fixed} Displays the image "sand.gif" in the background area of the blockquote and prevents the image from scrolling.
background-position	Sets the initial position of the background image.	vertical % horizontal % top center bottom left center right	body {background-image: url(..images/sand.gif); background position: center center} Centers the background image vertically and horizontally on the initial body screen.

Margins, Borders, and Padding:

The CSS Box properties - used to define the spacing in and around HTML elements

MARGIN
General Comments:  These properties let you specify where an element gets placed within its "box."
Property	Description	Values		Example
margin-top	Places the top margin of the element; you can use negative values.	XX units % auto		div {margin-top: 2em} Displays the top margin of the division 2 em spaces down the page.
margin-right	Places the right margin of the element; you can use negative values.	XX units % auto		div {margin-right: 1em} Displays the right margin of the division 1 em space from the right edge of the page.
margin-bottom	Places the bottom margin of the element; you can use negative values.	XX units % auto		div {margin-bottom: 10%} Places the bottom margin of the div element 10 percent down the page and diplays the element from the bottom up.
margin-left	Places the left margin of the element; you can use negative values.	XX units % auto		div {margin-top: 6em} Displays the left margin of the division 6 em spaces from the left of the page.
margin	Shorthand for all margins	margin-top margin-right margin-bottom margin-left		p{margin: 2cm 4cm 3cm 4cm}
padding	Shorthand for all padding	padding-top padding-right padding-bottom padding-left		table {padding: 10px 2% 15px 20px} - The top padding will be 10px, - the right padding will be 2% of the width of the closest element, - the bottom padding will be 15px, - and the left padding will be 20px.
padding-top	Inserts padding at the top of the element. (Theoretically. We have only been able to make padding-top along with its related properties, work with tables.)	XX units % auto		table {padding-top: 12pt} Inserts 12 points of space at the top of every cell in the table.
padding-bottom	Inserts padding at the bottom of the element.	XX units % auto		table {padding-bottom: 12pt} Inserts 12 points of space at the bottom of every cell in the table.
padding-left	Inserts padding along the left side of the element.	XX units % auto		table {padding-left: 2em} Inserts 2 em spaces at the left margin of every cell in the table.
padding-right	Inserts padding along the right side of the element.	XX units % auto		table {padding-right: 2em} Inserts 2 em spaces at the right margin of every cell in the table.
BORDER
tables and border properties.
border-width	Sets the width of the element's border.	thin medium thick none	div {border-width: thin} Displays a thin border around the division.
border-style	Sets the style of the element's border.	none *dotted *dashed solid double groove ridge inset outset	table {border-style: dashed} Displays a dashed border around the table.
border-color	Sets the color of the element's border.	color name hex value rgb(R%, G%, B%) rgb(R, G, B)	table {border-color: red} Displays a red border around the table.
border border-top border-bottom border-left border-right	Sets the width, color, and style of the border simultaneously	width value style value color value	table {border: thick double red} table {border: thin dotted #00FF00} Displays a thick, double, red border around the table. table {border-top: thin dashed red} Diplays a thin, dashed, red border at the top of the table.
height	Sets the height of the element.	XX units	img.button {height: 70px} Sets all button class images to be 70 pixels high.
width	Sets the width of the element.	XX units	img.button {width: 100px} Sets all button class images to be 100 pixels wide.
float	Places the element to the left or right and flows text around it.	right left none	img.button {float: left} Places a button class image to the left margin and flows text around it.
clear	Prevents text from flowing around an element.	right left none	img.button {clear: left} Places a button class image to the left margin and prevents any text or other elements from flowing beside it.

LIST
Property	Description	Values	Example
list-style-type	Sets the type of symbol that appears in front of a list item.	disc circle square decimal lower- roman upper- roman lower- alpha upper alpha	ul {list-style-type: square} Unordered list items will use a square bullet.
list-style-image	Selects a specific image to serve as a bullet in front of list items.	url(URLname)	ul {list-style-image: url(../images/smiley.gif)} Unordered list items will use the image "smiley.gif" as a bullet.
list-style-position	Describes how the bullet marker and text in a list line up with each other.	inside outside	ul {list-style-position: outside} Creates the effect of a hanging indent ul {list-style-position: inside} The bullet and the second line of text are flush left.

POSITION , VISIBILITY , CURSOR
Property	Description	Values	Example
display	Specifies the category of object an element belongs to: a block element, like a heading or paragraph; an inline element, like emphasis or anchors; or a list-item element. If the category is none, the content of the element should not be displayed at all.	none "" block inline list-item	p {display: none} Hides the content of the paragraph. p {display: ""} Display the contents of the paragraph. p {display: block} Treats the paragraph as a block element, which can be positioned separately using the positioning attributes.
position	Sets absolute or relative position of an element.	absolute fixed relative	.locateX {position: absolute; top:0px; left:0px;}
top bottom left right	Sets absolute or relative position of an element.	auto length percentage	Use with the position property to offset element from top, bottom, left or right of screen.
z-index	Sets the order that an element gets displayed.	auto number	.locateX {position: absolute; top:0px; left:0px; color: red; z-index:0} .locateY {position: absolute; top:2px; left:2px; color: green:z-index:1} <span class=” locateX”>WebDev13</span> <span class=” locateY”>WebDev13</span>
white-space	Describes how white space should be handled within the block elements.	normal pre no-wrap	p {white-space: no-wrap} The paragraph will break only with a specific <br> tag.
cursor	Sets the cursor style.	auto crosshair hand help move pointer text wait n-resize e-resize s-resize w-resize	p {cursor: wait }

Pseudo-Classes and Pseudo-Elements

 
a:link 
a:link img 
a:hover 
a:visited 
a:active 
first-line 
 first-letter

CSS AND HTML
Modify the code in the textarea below and click Run to view the example.
<!doctype html public "-//W3C//DTD HTML 4.0//EN"> <html> <head> <style type="text/css"> .box { width: 350px; height:350px; margin:15px; background-color: green; border-color: red ; border-style: dashed; padding:15px; } </style> </head> <body> <hr> <div class="box"> This is text CONTENT inside the box. <br> Loremipsumdolor sitamet, consetetursadipscingelitr, seddiamnonumyeirmodtemporinviduntutlabore et dolore magna aliquyamerat, seddiamvoluptua. </div> <hr> </body> </html>